<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1 {
            text-align: center;
        }

        table {
            border: 1px solid #ccc;
            width: 600px;
            height: 400px;
            border-spacing: 0px;
            border-collapse: collapse;
            margin: auto;
        }

        table td {
            border: 1px solid #ccc;
            text-align: center;
        }
    </style>
    </style>
</head>
<body>
    <h1>成绩表</h1>
    <table>
        <thead>
            <tr>
                <th>学号</th>
                <th>语文</th>
                <th>数学</th>
                <th>英语</th>
                <th>总成绩</th>
                <th>备注</th>
            </tr>
        </thead>
        <tbody id="content">
            <!-- <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr> -->
        </tbody>
    </table>
    <script>
        
        var students = [
            { xuehao: 1, chinese: 105, math: 62, english: 118 },
            { xuehao: 2, chinese: 89, math: 78, english: 120 },
            { xuehao: 3, chinese: 86, math: 64, english: 91 },
            { xuehao: 4, chinese: 78, math: 99, english: 91 },
            { xuehao: 5, chinese: 107.5, math: 97, english: 70 },
            { xuehao: 6, chinese: 112, math: 61, english: 92 },
            { xuehao: 7, chinese: 101, math: 79, english: 104 },
            { xuehao: 8, chinese: 71, math: 72, english: 105 },
            { xuehao: 9, chinese: 56, math: 68, english: 61 },
            { xuehao: 10, chinese: 98, math: 83, english: 77 }
        ]
        for(var j = 0; j < students.length; j++){
            students[j].total = students[j].chinese + students[j].math + students[j].english;
        }

        var res1 = students.sort(function(a, b){
            return b.chinese - a.chinese;
        })[0]

        var res2 = students.sort(function(a, b){
            return b.math - a.math;
        })[0]

        var res3 = students.sort(function(a, b){
            return b.english - a.english;
        })[0]

        students.sort(function(a, b){
            return b.total - a.total;
        })  

        for(var i = 0; i < students.length; i++){
            var tips = '';
            if(students[i].chinese === res1.chinese){
                tips = '语文成绩最好';
            }else if(students[i].math === res2.math){
                tips = '数学成绩最好';
            }else if(students[i].english === res3.english){
                tips = '英语成绩最好';
            }
            content.innerHTML += '<tr>' +
                '<td>' + students[i].xuehao + '</td>' +
                '<td>' + students[i].chinese + '</td>' +
                '<td>' + students[i].math + '</td>' +
                '<td>' + students[i].english + '</td>' +
                '<td>' + students[i].total + '</td>' +
                '<td>' + tips + '</td>' +
            '</tr>'
        }

       
    </script>
</body>
</html>